<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600"></canvas>
		
		<script type="text/javascript">
			var canvas = document.querySelector("#canvas")
			var ctx= canvas.getContext('2d')
			

			
			
			
			
			function renderClock(){
				ctx.clearRect(0,0,800,600)
				ctx.save() // 保留最原始的状态
				// 将坐标移动到画布的中央
				ctx.translate(400,300)
				ctx.rotate(-2*Math.PI/4)
				
				ctx.save()
				// 绘制表盘
				ctx.beginPath()
				ctx.arc(0,0,200,0,2*Math.PI)
				ctx.strokeStyle = "darkgreen"
				ctx.lineWidth = 10
				ctx.stroke()
				ctx.closePath()
				
				
				// 绘制分钟刻度
				for(var j = 0;j<60;j++){ // 分针
					ctx.rotate(Math.PI/30)
					ctx.beginPath()
					ctx.moveTo(180,0)
					ctx.lineTo(190,0)
					ctx.lineWidth = 2
					ctx.strokeStyle = 'cadetblue'
					ctx.stroke()
					ctx.closePath()
				}			
				ctx.save()
				
				// 绘制时钟刻度
				for(var i = 0;i<12;i++){ // 时针
					ctx.rotate(Math.PI/6)
					ctx.beginPath()
					ctx.moveTo(180,0)
					ctx.lineTo(200,0)
					ctx.lineWidth = 10
					ctx.strokeStyle = 'darkgreen'
					ctx.stroke()
					ctx.closePath()
				}
				ctx.restore()
				
				var time = new Date()
				var hour = time.getHours()%12
				var min = time.getMinutes()
				var sec = time.getSeconds()
				console.log(hour+":"+min+":"+sec)
				// 绘制秒针
				ctx.beginPath()
				// 根据秒针的时间进行旋转
				ctx.rotate(2*Math.PI/60*sec)
				ctx.moveTo(-30,0)
				ctx.lineTo(170,0)
				ctx.lineWidth = 2
				ctx.strokeStyle = "red"
				ctx.stroke()			
				ctx.closePath()
				
				ctx.restore()
				ctx.save()
				
				// 绘制分针
				ctx.beginPath()
				// 根据秒针的时间进行旋转
				ctx.rotate(2*Math.PI/60*min +2*Math.PI/3600*sec)
				ctx.moveTo(-20,0)
				ctx.lineTo(140,0)
				ctx.lineWidth = 4
				ctx.strokeStyle = "darkblue"
				ctx.stroke()			
				ctx.closePath()
				
				ctx.restore()
				ctx.save()
				// 绘制时针
				ctx.beginPath()
				// 根据时针的时间进行旋转
				ctx.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min)
				ctx.moveTo(-20,0)
				ctx.lineTo(100,0)
				ctx.lineWidth = 6
				ctx.strokeStyle = "darkgray"
				ctx.stroke()			
				ctx.closePath()
				
				ctx.beginPath()
				ctx.arc(0,0,10,0,2*Math.PI)
				ctx.fillStyle = "deepskyblue   "
				ctx.fill()
				ctx.closePath()
				
				ctx.restore()
				ctx.restore()
				ctx.save()
				
			}
			
			setInterval(function(){
				renderClock()
			},500)
		</script>
	</body>
</html>
